<template>
<div class="address" @click.stop>
  <div class="addressPop" v-if="address.pop">
    <div class="box">
      <h3><em @click="address.pop=!address.pop">确定</em>选择地区</h3>
      <ul class="list">
        <li ref="pcas" :style="address.on?'transition:1s':''">
          <dl :style="{'transform':'translateY('+-scrollpc.pcas+'px)','transition':address.on?'1s':'0s'}">
            <dd ref="odd" v-for="(item,idx) in pcasApiD" :class="{'curr':address.idx[0]===idx}">{{item.name}}</dd>
          </dl>
        </li>
        <li ref="city" :style="address.on?'transition:1s':''">
          <dl :style="{'transform':'translateY('+-scrollpc.city+'px)','transition':address.on?'1s':'0s'}">
            <dd v-for="(item,idx) in pcasApiD[address.idx[0]].city" :class="{'curr':address.idx[1]===idx}">{{item.name}}</dd>
          </dl>
        </li>
        <li ref="area">
          <dl :style="{'transform':'translateY('+-scrollpc.area+'px)','transition':address.on?'1s':'0s'}">
            <dd v-for="(item,idx) in pcasApiD[address.idx[0]].city[address.idx[1]].area" :class="{'curr':address.idx[2]===idx}">{{item}}</dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>
  <h2>领奖地址仅限花瑾堂品牌合作门店地址<br/>非合作门店地址无法参与兑奖</h2>
  <h3>如不清楚地址，请联系邀请你参与合作门店为你提供准确地址</h3>
  <div class="form">
    <ul>
      <li><input type="text" v-model="form.username" placeholder="收货人姓名"></li>
      <li><input type="tel" v-model="form.phone" maxlength="11" placeholder="收货人电话"></li>
      <li><input type="tel" placeholder="选择地区" :value="address.val" readonly @click="areaFn"></li>
      <li><textarea v-model="address2" placeholder="详细收货地址必须注明门店名称-未注明门店名称将无法参与兑奖"></textarea></li>
    </ul>
  </div>
  <button class="btnStyle btn1" @click="submitFn">确认</button>
</div>
</template>

<script>
import pcasApi from '@/assets/pcas.json';
import {mapMutations} from 'vuex';
export default{
  data:()=>{
    return{
      form:{
        username:'',
        phone:'',
        address:'',
        token:localStorage.getItem('token')
      },
      address:{
        val:'',
        idx:[0,0,0],
        pop:false,
        on:true
      },
      pcasApiD:'',
      scrollpc:{
        pcas:0,
        city:0,
        area:0
      },
      address2:''
    }
  },
  mounted(){
    this.pcasApiD=pcasApi.pcas;
  },
  methods:{
    ...mapMutations(['homePopEdit']),
    submitFn(){
      this.form.address=this.address.val+' '+this.address2;
      for(let i in this.form){
        if(this.form[i]==''){
          Toast('请填写完整信息');
          return false;
        }
      }
      this.http(this.api.updateAddress,this.form).then(res=>{
        switch(parseInt(res.data.code,10)){
          case 0:
            Toast('修改成功！');
            this.homePopEdit(3);
            break;
          default:
            Toast(res.data.msg);
        }
      });
    },
    areaFn(){
      this.address.pop=!this.address.pop;
      this.$nextTick(() => {
        this.touchFn(this.$refs.pcas,'pcas',0);
        this.touchFn(this.$refs.city,'city',1);
        this.touchFn(this.$refs.area,'area',2);
      });
    },
    touchFn(obj,attr,idx){
      let start,
        move,
        present,
        oHeight=this.$refs.odd[0].offsetHeight,
        end;
      obj.addEventListener("touchstart",(e) => {
        this.address.on=!this.address.on;
        present=this.scrollpc[attr];
        start=e.changedTouches[0].clientY;
      });
      obj.addEventListener("touchmove",(e) => {
        move=e.changedTouches[0].clientY;
        end=present+(start-move);
        if(end<0){
          end=0;
        }else if(end>obj.firstChild.offsetHeight-oHeight){
          end=obj.firstChild.offsetHeight-oHeight;
        }
        this.scrollpc[attr]=end;
      });
      obj.addEventListener("touchend",() => {
        end=Math.round(end/oHeight)*oHeight;
        this.address.idx[idx]=Math.round(end/oHeight);
        if(idx==0){
          this.scrollpc.city=0;
          this.scrollpc.area=0;
          this.address.idx[1]=0;
          this.address.idx[2]=0;
        }else if(idx==1){
          this.scrollpc.area=0;
          this.address.idx[2]=0;
        }
        this.address.on=!this.address.on;
        this.scrollpc[attr]=end;
        this.address.val=this.pcasApiD[this.address.idx[0]].name+' '+this.pcasApiD[this.address.idx[0]].city[this.address.idx[1]].name+'市 '+this.pcasApiD[this.address.idx[0]].city[this.address.idx[1]].area[this.address.idx[2]]
      });
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
.address{
  width:348px;
  background:url('~@img/loginBg.png') center top no-repeat #FFF;
  background-size:100% auto;
  border-radius:14px;
  padding:0 24px 30px;
  box-sizing: border-box;
  position:relative;
  &:before{
    position:absolute;
    content:'×';
    border:1px solid #FFF;
    border-radius:50%;
    width:35px;
    line-height:35px;
    color:#FFF;
    left:0;
    right:0;
    bottom:-60px;
    margin:auto;
    font-size:30px;
    pointer-events:none;
  }
  h2{
    color:#000;
    font-weight:bold;
    margin:58px 0 0;
    font-size:14px;
  }
  h3{
    color:$c02;
    font-size:10px;
    padding-top:6px;
  }
  .form{
    margin-top:20px;
    ul{
      li{
        display:flex;
        margin-bottom:20px;
        input{
          width:100%;
          flex:1;
          height:50px;
          box-shadow:0 4px 10px 2px rgba(210,210,210,0.32);
          border-radius:99em;
          font-size:14px;
          padding-left:20px;
        }
        textarea{
          resize: none;
          width:100%;
          flex:1;
          height:100px;
          box-shadow:0 4px 10px 2px rgba(210,210,210,0.32);
          border-radius:5px;
          font-size:14px;
          padding:10px 20px;
        }
        .btn2{
          margin-left:20px;
        }
      }
    }
  }
  //地区选择
  .addressPop{
    position:fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background:rgba(#000,0.3);
    z-index:9;
    .box{
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      background-color:#FFF;
      h3{
        line-height:2.6;
        font-size:18px;
        overflow:hidden;
        padding-left:20px;
        text-align:left;
        box-shadow:0 0 5px rgba(#000,0.16);
        position:relative;
        z-index:2;
        em{
          float:right;
          color:#ef5c6e;
          padding:0 20px;
        }
      }
      .list{
        display:flex;
        background-color:#fafafa;
        height:(560px/2);
        position:relative;
        &:before{
          pointer-events:none;
          position:absolute;
          border:1px solid #CCC;
          border-width:1px 0;
          height:(76px/2);
          width:100%;
          left:0;
          top:(80px*3/2);
          content:'';
          z-index:9;
          background-color:rgba(#000,0.05);
        }
        li{
          flex:1;
          border-right:1px solid #EEE;
          line-height:(80px/2);
          position:relative;
          overflow:hidden;
          &:last-child{
            border:0;
          }
          dl{
            margin:(80px*3/2) 0;
            dd{
              overflow:hidden;
              white-space:nowrap;
              text-overflow:ellipsis;
              color:rgba(#000,0.3);
              &.curr{
                font-size:(30px/2);
                color:rgba(#000,0.8);
              }
            }
          }
        }
      }
    }
  }
}
</style>
